<template>
<el-select v-model="currentTableId" filterable 
      placeholder="请选择表"
      @change="tableChange()">
    <el-option
      v-for="item in selectTable"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
  <el-row>
    <el-col :span="8">
        <el-table
      :data="columnData"
      @row-click="rowClick"
      style="width: 100%">
      <el-table-column
        prop="columnName"
        label="列名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="columnDescription"
        label="描述"
        width="180">
      </el-table-column>
    </el-table></el-col>
    <el-col :span="16"><el-table
      :data="createData"
      style="width: 100%">
      <el-table-column
        prop="columnName"
        label="列名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="aliasName"
        label="别名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="columnDescription"
        label="描述"
        width="180">
      </el-table-column>
      <el-table-column
        prop="columnType"
        label="类型">
      </el-table-column>
      <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template #default="scope">
        <el-button @click="deleteRow(scope.$index)" type="text" size="small">移除</el-button>
      </template>
    </el-table-column>
    </el-table></el-col>
  </el-row>
</template>

<script>
import axios from "axios";
export default {
    data() {
      return {
      selectTable: [],
      currentTableId: "",
      columnData:[],
      createData:[]
      }
    },
    mounted() {
    this.init();
  },
  methods: {
    init() {
      let that = this;
      axios
        .get("https://localhost:44328/api/Code/GetList")
        .then(function (response) {
          that.selectTable = response.data.data;
          that.selectTable.unshift({ value: "", label: "请选择表" });
          //that.currentTableId = response.data.data[0].value;
          //that.tableChange();
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    tableChange() {
      let that = this;
      if (that.currentTableId == "") {
        that.tableData = [];
        return;
      }
      axios
        .get("https://localhost:44328/api/Code/Find", {
          params: { id: that.currentTableId },
        })
        .then(function (response) {
          that.columnData = response.data.data.columns;
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    rowClick(row){
        this.createData.push(row);
    },
    deleteRow(index){
this.createData.splice(index, 1);
    }
  }
};
</script>

<style>
.el-row {
    margin-bottom: 20px;
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
